<template>
  <div class="title">地震统计</div>
  <div class="chartbox" ref="chartRef"> </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

let xdata = []

let sdata = {
  s1: [],
  s2: [],
  s3: []
}

const getData = (e) => {
  sdata = {
  s1: [],
  s2: [],
  s3: []
}
  xdata = []
 if(e && e.length <= 0){
    myChart &&  myChart.dispose()
    return
 }
  for (const item of e[0].month) {
    xdata.push(item.month)
  }

  var index = 1
  for (const element of e) {
    for (const item of element.month) {
      sdata['s' + index].push(item.count)
    }
    index++
  }

  initChart()
}
// 主动暴露childMethod方法
defineExpose({ getData })

const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    // myChart &&  myChart.dispose()
    myChart = echarts.init(chartRef.value)

    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        top: '5%',
        left: 'right',
        icon: 'circle',
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        top: 40,
        right: 20,
        left: 50,
        bottom: 40
      },
      xAxis: {
        type: 'category',
        data: xdata,
        axisLine: {
          lineStyle: {
            color: '#B9EEFF'
          }
        },
        axisTick: { show: false },
        axisLabel: {
          margin: 10,
          color: '#B9EEFF',
          textStyle: {
            fontSize: 14,
            color: '#B9EEFF'
          }
        }
      },
      yAxis: {
        axisLabel: {
          formatter: '{value}',
          color: '#B9EEFF'
        },
         name:"个",
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        }
      },
      series: [
        {
          name: '3.0-3.9',
          type: 'line',
          data: sdata.s1,
          symbolSize: 1,
          symbol: 'circle', // 设置数据点大小为10px
          smooth: true,
          showSymbol: false,
          symbolSize: 15,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: ' rgba(48, 219, 232, 0.5) '
                  },
                  {
                    offset: 1,
                    color: 'rgba(48, 219, 232, 0)'
                  }
                ],
                false
              )
            }
          },
          lineStyle: {
            width: 3,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: ' #30DBE8 '
              },
              {
                offset: 0.2,
                color: '#31DCE6 '
              },
              {
                offset: 0.7,
                color: '#44F1B7'
              },
              {
                offset: 1,
                color: '#30DBE8'
              }
            ])
          },
          itemStyle: {
            normal: {
              borderColor: 'white', // 设置数据点边框颜色为白色
              borderWidth: 3,
              color: '#64f7d6',
              barBorderRadius: 12
            }
          }
        },
        {
          name: '4.0-4.9',
          type: 'line',
          data: sdata.s2,
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          symbolSize: 15, // 设置数据点大小为10px
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: ' rgba(27, 90, 183, 0.5)  '
                  },
                  {
                    offset: 1,
                    color: 'rgba(17, 70, 139, 0)'
                  }
                ],
                false
              )
            }
          },
          lineStyle: {
            width: 3,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: ' rgba(132, 167, 255, 0)'
              },
              {
                offset: 0.2,
                color: '#02C6FF '
              },
              {
                offset: 0.7,
                color: '#0368FF '
              },
              {
                offset: 1,
                color: ' rgba(87, 131, 246, 0.18) '
              }
            ])
          },
          itemStyle: {
            normal: {
              borderColor: 'white', // 设置数据点边框颜色为白色
              borderWidth: 3,
              color: '#04adf6',
              barBorderRadius: 12
            }
          }
        },
        {
          name: '5.0+',
          type: 'line',
          data: sdata.s3,
          symbolSize: 1,

          symbol: 'circle',
          smooth: true,
          symbolSize: 15, // 设置数据点大小为10px
          showSymbol: false,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: ' rgba(255, 143, 78, 0.5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 191, 79, 0)'
                  }
                ],
                false
              )
            }
          },
          lineStyle: {
            width: 3,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#FFBF4F'
              },
              {
                offset: 0.2,
                color: '#FFBF4F'
              },
              {
                offset: 0.7,
                color: '#FF8F4E '
              },
              {
                offset: 1,
                color: ' #FFBF4F '
              }
            ])
          },
          itemStyle: {
            normal: {
              borderColor: 'white', // 设置数据点边框颜色为白色
              borderWidth: 3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#D67524'
                },
                {
                  offset: 1,
                  color: '#D0B026'
                }
              ]),
              barBorderRadius: 12
            }
          }
        }
      ]
    }

    myChart.setOption(option)
    // 指定图表的配置项和数据
  }
}

// 组件挂载后初始化图表
onMounted(() => {
  window.addEventListener('resize', () => {
   myChart && myChart.resize()
  })
})

// 组件卸载时销毁图表实例，避免内存泄漏
onUnmounted(() => {
  if (myChart) {
   myChart.dispose()
  }
})
</script>  
  
<style scoped>
.title {
  height: 41px;
  color: #fff;
  line-height: 41px;
  font-size: 18px;
  padding-left: 26px;
  font-weight: bold;
}
.chartbox {
  height: calc(100% - 41px);
}
</style>